<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件用于滚动通告场景，有多种模式可供选择。
		</demo-desc>
		
		<fu-section title="水平连续滚动" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="水平不连续滚动" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" :circular="false"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="垂直滚动" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" mode="column"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="手动滚动" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" mode="column" :autoPlay="false"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="停止滚动" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" mode="column" playStatus="paused"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="慢速滚动" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" mode="row" :speed="100"></fu-notice-bar>
			<view class="fu-m-t-30">
				<fu-notice-bar :list="list" mode="column" :duration="5000"></fu-notice-bar>
			</view>
		</fu-section>
		
		<fu-section title="隐藏左右两侧图标" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" :leftIcon="false" :rightIcon="false"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="自定义左右两侧图标" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" leftIconName="calendar" :rightIcon="true" rightIconName="location"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="自定义大小" customClass="fu-m-t-20" type="line">
			<fu-notice-bar :list="list" leftIconName="calendar" :rightIcon="true" rightIconName="right" fontSize="15" leftIconSize="24" rightIconSize="20"></fu-notice-bar>
		</fu-section>
		
		<fu-section title="自定义颜色" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-notice-bar bgColor="#EFEFEF" :list="list"></fu-notice-bar>
			</view>
			<view class="fu-m-t-30">
				<fu-notice-bar bgColor="linear-gradient(45deg, #31C9E8, #2DE8BD)" color="#FFFFFF" :list="list"></fu-notice-bar>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	
	// data数据
	const list = reactive([
		'FusionsUi现已发布V1.0.0',
		'今天天气晴朗，适合处理bug',
		'今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
	])
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>